<template>
  <div>
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">视频播放</span>
      <img
        src="@/assets/resource/share.png"
        class="share_icon"
        @click="shareBtn()"
      />
    </div>
    <div
      :class="
        !pageData.courseId && (pageData.messageCode && pageData.price > 0)
          ? 'course_bottom'
          : ''
      "
      class="course_details"
      id="course"
    >
      <div class="course_autoBox" :style="pageData.messageCode&&pageData.realPrice>0&&level!=2?'paddingBottom:1.56rem':''">
        <div class="course_cover">
          <div id="mse"></div>
          <div
            class="course_dialog"
            v-if="pageData.messageCode"
            @click="videTap"
          ></div>
        </div>
        <div class="course_main">
          <div class="course_name">{{ pageData.name }}</div>
          <div class="course_con">
            <div class="chapter_box">
              {{ pageData.uploadTime ? pageData.uploadTime.substr(0, 11) : "" }}
            </div>
            <div class="browse_box">浏览 {{ pageData.browseNum }}</div>
          </div>
          <div class="price_con">
            <div class="course_price">
              <span v-if="pageData.realPrice > 0" style="color:#E40000"
                >￥{{ Number(pageData.realPrice).toFixed(2) }}</span
              >
              <span v-if="pageData.realPrice && pageData.realPrice==0" style="color:#0AB562">免费</span>
              <span class="course_lineprice" v-if="pageData.price && pageData.realPrice > 0"
                >￥{{ Number(pageData.price).toFixed(2) }}</span
              >
            </div>
            <img
              src="@/assets/common/collect.png"
              class="collect_icon"
              @click="collect"
              v-if="pageData.isCollection == 1"
            />
            <img
              src="@/assets/common/collect_default.png"
              class="collect_icon"
              @click="collect"
              v-else
            />
          </div>
        </div>
        <!-- 详情 -->
        <div class="detail_main" v-if="tabType == 'detail'">
          <div class="detail_title" v-if="content">内容简介</div>
          <div class="detail_content" v-if="content">
            <div>
              <div
                v-html="intro"
                v-if="isOpen"
                @click="changeImg($event)"
              ></div>
              <div v-html="content" v-else @click="changeImg($event)"></div>
            </div>
            <div
              @click="openIntro"
              v-if="pageData.synopsis && pageData.synopsis.length > 60"
              class="open_intro"
            >
              <img
                src="@/assets/resource/open.png"
                class="open_icon"
                v-if="isOpen"
              />
              <img v-else src="@/assets/resource/show.png" class="open_icon" />
            </div>
          </div>
          <div class="detail_title">
            精选评论
            <div class="add_review" @click="addReview">
              <img
                src="@/assets/courseDetails/review.png"
                class="review_icon"
              />写留言
            </div>
          </div>
          <!-- 评论列表 -->
          <review
            :reviewData="reviewData"
            :reviewTotal="reviewTotal"
            :reviewType="reviewType"
            :postId="listQuery.oid"
            :listNull="listNull"
            :loading="loading"
            v-on:myList="agreeBtn($event)"
            :name="pageData.name"
          ></review>
        </div>
      </div>
      <div
        class="course_btn"
        v-if="pageData.messageCode && pageData.realPrice > 0 && level != 2"
      >
        <div class="course_open" @click="openVip">开通VIP免费</div>
        <div class="bottom_btn" @click="payBtn">立即购买</div>
      </div>
      <!-- 分享功能 -->
      <div class="share_box" v-if="shareDialog">
        <div class="share_main" ref="imageWrapper" v-if="!dataURL">
          <div class="share_header_box">
            <img
              class="header_cover"
              :src="coverUrl(personCover)"
              v-if="personCover"
              crossOrigin="anonymous"
            />
            <img src="@/assets/common/cover.png" class="header_cover" v-else />
            <span>{{ account }}</span>
            <span class="share_text">给您分享一堂好课</span>
          </div>
          <div class="share_cover">
            <img :src="coverUrl(pageData.cover)" v-if="pageData.cover" class="share_cover_img" crossOrigin='anonymous'>
            <img :src="coverUrl(pageData.imgPath,'file')" v-else-if="pageData.imgPath" class="share_cover_img" crossOrigin='anonymous'>
            <img
              src="@/assets/common/default_video.png"
              v-else
              class="share_cover_img"
              crossOrigin="anonymous"
            />
          </div>
          <div class="share_title">
            {{
              pageData.name.length > 27
                ? pageData.name.substr(0, 27) + "..."
                : pageData.name
            }}
          </div>
          <div class="share_bottom">
            <div class="share_left">
              <div>长按识别图中小程序码</div>
              <div>了解更多课程</div>
            </div>
            <div class="share_right">
              <div class="qrcode" ref="qrCodeUrl" id="qrcode"></div>
            </div>
          </div>
        </div>
        <div class="domo">
          <img :src="dataURL" alt="" v-if="dataURL" class="share_picture" />
        </div>
        <div class="canvas_text">长按图片保存或发送给朋友</div>
        <div class="canvas_image">
          <img
            src="@/assets/common/delete_icon.png"
            class="delete_icon"
            @click="closeShare"
          />
        </div>
      </div>
      <!-- 预览图片 -->
      <img-preview
        :previewList="pageData.imgList"
        :imgIndex="imgIndex"
        v-if="previewDialog"
      ></img-preview>
    </div>
  </div>
</template>

<script>
import "@static/css/common.css";
import {
  liveImg,
  otherImageUrl,
  imageUrl,
  codeUrl,
  imgUrl
} from "@/utils/global.js";
import { Toast } from "mint-ui";
import {
  classDetAPI,
  reviewAPI,
  agreeAPI,
  videoDetAPI,
  videoTimeAPI,
  getVideoAPI
} from "@/api/course.js";
import { collectSingleAPI } from "@/api/common";
import { getMemberAPI } from "@/api/person.js";
import review from "@/components/review";
import { createOrderAPI, isPayCoursementAPI } from "@/api/order.js";
import html2canvas from "html2canvas";
import QRCode from "qrcodejs2";
import Player from "xgplayer";
import HlsJsPlayer from "xgplayer-hls.js";
import utils from "@/utils/utils.js";

export default {
  name: "videoDet",
  components: { review },
  data() {
    return {
      pageData: {},
      urlPath: otherImageUrl,
      coverPath: imageUrl,
      liveImg: liveImg,
      reviewTotal: null,
      reviewData: [],
      tabType: "detail",
      listQuery: {
        oid: ""
      },
      reviewType: "video",
      play: false,
      videoTimes: "",
      content: null,
      poster: "",
      listNull: false,
      shareDialog: false,
      loading: false,
      dataURL: "",
      currentTime: "",
      account: "",
      personCover: "",
      imgUrl: imgUrl,
      // ispayShow: false,
      previewDialog: false,
      imgIndex: 0,
      intro: null,
      isOpen: false,
      level: localStorage.getItem('level')
    };
  },
  destroyed() {
    this.getvideoprogress()
  },
  mounted() {
    if (localStorage.getItem("ispayment")) {
      //判断是否支付过
      isPayCoursementAPI({ oid: localStorage.getItem("coursePayId") }).then(
        res => {
          //后台接口判断是否支付
          if (res.data.data == 1) {
            //支付成功
            Toast("支付成功");
          } else {
            Toast("支付失败");
          }
          localStorage.removeItem("ispayment");
          this.listQuery.oid = localStorage.getItem("videoId");
          this.getDetails();
          this.getMember();
          // this.ispayShow = true
        }
      );
    } else {
      this.listQuery.oid = localStorage.getItem("videoId");
      this.getDetails();
      this.getMember();
    }
    console.log(this.listQuery.oid,'oid')
  },
  methods: {
    getvideoprogress(){
      let data={
        time:this.currentTime,
        resourceId: this.listQuery.oid
      }
      videoTimeAPI(data).then(res =>{})
    },
    changeImg($event) {
      let that = this;
      if ($event.toElement.localName == "img") {
        that.imgIndex = this.pageData.imgList.indexOf(
          $event.toElement.currentSrc
        );
        that.previewDialog = true;
      }
    },
    getDetails() {
      let that = this;
      videoDetAPI(this.$route.query.id).then(res => {
        if (res.data.code == 0) {
          this.pageData = res.data.data;
          localStorage.setItem("videoId",this.pageData.id)
          this.content = res.data.data.synopsis
            ? res.data.data.synopsis.replace(
                /\<img/gi,
                '<img style="max-width:100%;height:auto"'
              )
            : "";
          if (that.pageData.cover) {
            that.poster = that.urlPath + "?fileName=" + that.pageData.cover;
          } else {
            that.poster = that.liveImg + that.pageData.imgPath;
          }
          if (this.pageData.synopsis && this.pageData.synopsis.length > 60) {
            this.intro = this.pageData.synopsis.substr(0, 200) + "......";
            this.isOpen = true;
          }
          this.getVideo();
          this.getReviewList(); //获取评论列表
        } else {
          Toast(res.data.msg);
        }
      });
    },
    getVideo() {
      let that = this;
      getVideoAPI(this.pageData.video).then(res => {
        if (res.data.code == 0) {
          let player = new HlsJsPlayer({
            id: "mse",
            fluid: true,
            useHls: true,
            url: that.imgUrl + "file/" + res.data.data,
            poster: that.poster
          });
          player.on("timeupdate", function(e) {
            console.log(e,'timeupdate')
            that.currentTime = (e.currentTime.toFixed(0)) * 1000;
            // that.currentTime = (that.pageData.currentTimeLength.toFixed(0)) * 1000;
          });
        } else {
          Toast(res.data.msg);
        }
      });
    },
    openIntro() {
      //展开收起简介
      this.isOpen = !this.isOpen;
    },
    getMember() {
      getMemberAPI().then(res => {
        if (res.data.code == 0) {
          this.account = res.data.data.account;
          this.personCover = res.data.data.img;
        }
      });
    },
    shareBtn() {
      //分享
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
        return;
      }
      this.shareDialog = true;
      let that = this;
      that.$nextTick(() => {
        that.creatQrCode();
      });
      setTimeout(function() {
        html2canvas(that.$refs.imageWrapper, {
          useCORS: true,
          allowTaint: true,
          backgroundColor: null
        }).then(canvas => {
          that.dataURL = canvas.toDataURL();
        });
      }, 1000);
    },
    creatQrCode() {
      let text = window.location.href;
      let that = this;
      setTimeout(function() {
        let qrcode = new QRCode("qrcode", {
          width: 72,
          height: 66,
          text: text, // 二维码地址
          colorDark: "#000",
          colorLight: "#fff"
        });
      }, 500);
    },
    openVip() {
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
        return
      }
      this.navigationFuc('member')
    },
    payBtn() {
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
        return
      } 
      let goodsList = []
      goodsList.push({
        goodsId: this.pageData.id,
        goodsType: this.pageData.resourceType,
        num: 1,
        realPrice: this.pageData.realPrice
      })
      createOrderAPI({buyType: 1,goodsList: goodsList}).then(res => {
        if(res.data.code === 0) {
          this.navigationFuc('orderList',{ orderId: res.data.data, title: '视频' });
        } else {
          Toast(res.data.msg)
        }
      })
    },
    getReviewList() {
      //获取评论列表
      let data = {
        pageNum: 1,
        pageSize: 5,
        resourceId: this.pageData.id,
        resourceType: 4 //1图书4视频5音频
      };
      this.loading = true;
      reviewAPI(data).then(res => {
        if (res.data.code == 0) {
          this.reviewData = res.data.data.list;
          this.reviewTotal = res.data.data.total;
          this.listNull =
            res.data.data.list && res.data.data.list.length > 0 ? false : true;
        } else {
          Toast(res.data.msg);
        }
        this.loading = false;
      });
    },
    collect() {
      //收藏和取消收藏
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
        return false;
      }
      let data = {
        id: this.pageData.id,
        type: this.pageData.resourceType
      };
      collectSingleAPI(data).then(res => {
        if (res.data.code === 0) {
          this.pageData.isCollection == 1
            ? Toast("已取消收藏")
            : Toast("收藏成功");
          this.pageData.isCollection = this.pageData.isCollection == 1 ? 0 : 1;
        } else {
          Toast(res.data.msg);
        }
      });
    },
    agreeBtn(data) {//点赞 --- icon实现
      let that = this
      let type = data.isAgree == 0 ? 1 : 0
      agreeAPI({commentId:data.id,type:type}).then(res => {
        if (res.data.code === 0) {//点赞成功
          this.getReviewList()
          Toast(data.isAgree == 0 ? '点赞成功' : '已取消点赞')
        } else {
          Toast(res.data.msg);
        }
      });
    },
    addReview() {
      //去评论
      if (!localStorage.getItem("y-token")) {
        //判断是否登录
        this.$router.push({ name: "login" });
      } else {
        if(this.level !=2 ) {
          this.$router.push({
            name: "addReview",
            query: {
              resourceType: this.pageData.resourceType,
              resourceId: this.pageData.id,
              resourceName: this.pageData.name
            }
          });
        } else {
          Toast('请用个人账号登录进行评论')
        }
      }
    },
    videTap() {
      //查看无权限视频
      Toast(this.pageData.message);
    },
    closeShare() {
      //关闭
      this.shareDialog = false;
    }
  }
};
</script>

<style>
.detail_content p {
  color: #5e5f71;
  font-weight: 500;
  margin: 0;
  padding: 0;
  font-size: 16px;
}
</style>
<style scoped>
.course_details {
  min-height: 100vh;
}
/* 底部按钮 */
.course_btn {
  width: 100%;
  height: 1.56rem;
  position: fixed;
  left: 0;
  bottom: 0;
  background: #fff;
  box-shadow: 0px -1px 42px 0px rgba(223, 223, 223, 0.6);
  padding: 0.29rem 0.3rem;
  box-sizing: border-box;
  display: flex;
}
.course_open {
  width: 4.79rem;
  height: 100%;
  background: #ff7168;
  border-radius: 0.1rem;
  color: #fbfbfb;
  font-size: 14px;
  font-weight: bold;
  margin-right: 0.2rem;
  text-align: center;
  line-height: 0.98rem;
}
.course_cover {
  height: 4.22rem;
  width: 100%;
  position: relative;
}
.course_dialog {
  position: absolute;
  height: 4.8rem;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 9999;
}
.cover {
  height: 4.8rem;
  width: 100%;
}
.course_name {
  font-size: 18px;
  font-weight: bold;
  color: #121212;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
  margin-right: 0.34rem;
}
.course_main {
  padding: 0.32rem 0.3rem 0.48rem;
  border-bottom: solid 0.14rem #f5f5f5;
}
/* 章节 */
.course_con {
  overflow: hidden;
  color: #9c9d9c;
  margin-top: 0.35rem;
  font-weight: 500;
  font-size: 13px;
  padding-bottom: 0.38rem;
}
.chapter_box {
  float: left;
}
.chapter_icon {
  width: 0.2rem;
  height: 0.24rem;
}
.browse_box {
  float: right;
}
.browse_icon {
  width: 0.22rem;
  height: 0.22rem;
}
/* 价格 */
.price_con {
  overflow: hidden;
  padding-top: 0.5rem;
  border-top: solid 1px #f5f5f5;
}
.course_price {
  color: #e40000;
  font-size: 18px;
  font-weight: 500;
  float: left;
}
.course_lineprice {
  color: #999999;
  font-size: 14px;
  font-weight: normal;
  margin-left: 0.16rem;
  text-decoration: line-through;
}
.share_icon {
  width: 0.36rem;
  height: 0.36rem;
  margin: auto 0 auto 30%;
}
.collect_icon {
  float: right;
  width: 0.4rem;
  height: 0.38rem;
  margin-top: 0.1rem;
}
.course_title {
  border-bottom: solid 1px #e6eaf2;
  height: 0.96rem;
  line-height: 0.96rem;
  color: #232323;
}
.title {
  float: left;
  width: 50%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
}
.bottom_line {
  width: 1.44rem;
  height: 0.06rem;
  background: #316ad8;
  margin: 0 auto;
}
.hover_color {
  color: #316ad8;
  font-weight: bold;
}

/* 详情 */
.detail_main {
  margin: 0 0.3rem;
}
.detail_title {
  color: #333333;
  font-weight: bold;
  font-size: 18px;
  margin-top: 0.8rem;
  margin-bottom: 0.1rem;
}
.add_review {
  height: 0.5rem;
  padding: 0 0.26rem;
  color: #fff;
  background: linear-gradient(
    -25deg,
    rgba(252, 116, 18, 1) 0%,
    rgba(247, 139, 62, 1) 100%
  );
  border-radius: 0.25rem;
  line-height: 0.5rem;
  float: right;
  font-weight: normal;
  font-size: 11px;
  margin-top: 0.1rem;
}
.review_icon {
  height: 0.27rem;
  width: 0.27rem;
  float: left;
  margin-top: 0.11rem;
  margin-right: 0.12rem;
}
.detail_content {
  margin-top: 0.4rem;
  margin-bottom: 0.1rem;
}
.open_intro {
  width: 0.6rem;
  margin: 0.38rem auto 0;
}
.open_icon {
  width: 0.2rem;
  height: 0.2rem;
}
/* 推荐 */
.recommend_main {
  margin: 0 0.3rem;
}
.recommend_title {
  color: #222;
  font-weight: bold;
  font-size: 20px;
  margin-top: 0.5rem;
}
.series_content {
  display: flex;
  border-bottom: solid 1px #eeeeee;
  padding: 0.28rem 0;
}
.series_cover {
  width: 3rem;
  margin-right: 0.24rem;
}
.series_cover img {
  width: 3rem;
  height: 2rem;
}
.series_bottom {
  flex: 1;
}
.series_name {
  min-height: 0.74rem;
  color: #202021;
  font-weight: bold;
  line-height: 0.4rem;
  font-size: 15px;
  white-space: normal;
  overflow: hidden;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  text-overflow: ellipsis;
  display: -webkit-box;
}
/* 价格 */
.series_price {
  font-size: 12px;
  margin-top: 0.5rem;
  float: left;
  width: 70%;
  align-items: center;
  justify-content: center;
}
.series_realprice {
  color: #fe2023;
  font-size: 14px;
  line-height: 0.4rem;
  margin-right: 0.15rem;
  font-weight: 500;
}
.series_lineprice {
  text-decoration: line-through;
  color: #9c9d9c;
}
/* 浏览量--更新节数 */
.series_main {
  font-size: 11px;
  color: #bdbebd;
  margin-top: 0.3rem;
  overflow: hidden;
}
.series_periods {
  float: left;
  letter-spacing: 1px;
}
.series_browse {
  float: right;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.5rem;
}
.browse_icon {
  height: 0.2rem;
  width: 0.2rem;
  margin-right: 0.08rem;
}
.recommend_bottom {
  height: 1.03rem;
  line-height: 1.03rem;
  width: 100%;
  background: #316ad8;
  color: #fff;
  font-weight: 500;
  font-size: 18px;
}
.recommend_bottom .recommend_bottom_icon {
  height: 0.4rem;
  width: 0.4rem;
  float: left;
  margin-top: 0.31rem;
  margin-left: 37%;
  margin-right: 0.16rem;
}
/* 立即购买按钮 */
.bottom_btn {
  height: 100%;
  line-height: 0.98rem;
  width: 1.91rem;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  text-align: center;
  border: 0.02rem solid #ff7168;
  color: #ff7168;
  border-radius: 0.1rem;
  box-sizing: border-box;
}
.pay_icon {
  width: 0.43rem;
  height: 0.31rem;
  margin-right: 0.15rem;
}

/* 分享 */
.share_box {
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  z-index: 4000;
  top: 0;
}
.domo {
  width: 77%;
  margin: 0 auto;
  margin-top: 0.8rem;
}
.domo img {
  display: inline-block;
  min-height: 8rem;
  width: 100% !important;
}
.share_main {
  width: 77%;
  margin: 0 auto;
  min-height: 8rem;
  margin-top: 0.8rem;
  overflow: hidden;
  background: url("../../assets/course/bg.png");
  background-size: 100% 100%;
  padding: 0.58rem 0.3rem 0 0.3rem;
  box-sizing: border-box;
}
.share_header_box {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 14px;
}
.share_header_box .header_cover {
  height: 0.5rem;
  width: 0.5rem;
  margin-right: 0.16rem;
}
.share_header_box .share_text {
  color: #999;
  font-size: 12px;
  margin-left: 0.09rem;
}
.share_cover {
  height: 3.26rem;
  width: 100%;
  margin-top: 0.2rem;
}
.share_cover_img {
  height: 3.26rem;
  width: 100%;
}
.share_title {
  color: #121212;
  font-size: 15px;
  font-weight: bold;
  margin-top: 0.15rem;
  height: 0.76rem;
}
.share_bottom {
  margin-top: 0.9rem;
}
.share_left {
  float: left;
  color: #999da8;
  line-height: 0.4rem;
  font-size: 14px;
}
.share_right {
  float: right;
  margin-top: -0.2rem;
  height: 1.34rem;
  width: 1.45rem;
}
.canvas_text {
  text-align: center;
  color: #fff;
  font-size: 14px;
  padding-top: 0.35rem;
  padding-bottom: 0.4rem;
  border-radius: 0.14rem;
}
.canvas_image {
  width: 100%;
  text-align: center;
}
.delete_icon {
  height: 0.84rem;
  width: 0.84rem;
  display: inline-block;
  margin: 0 auto;
}

/* scroll-view */
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll_view_item {
  display: inline-block;
}
/* 支付弹窗 */
.member_payTip {
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 1000;
}
.member_pay_con {
  width: 80%;
  margin-left: 10%;
  background: #fff;
  border-radius: 8px;
  height: 3.32rem;
  position: absolute;
  top: 50%;
  margin-top: -1.66rem;
}
.member_pay_text {
  color: #333333;
  border-bottom: 1px solid #e4e4e4;
  text-align: center;
  height: 1.1rem;
  line-height: 1.1rem;
  font-size: 17px;
}
.member_pay_text:last-child {
  border-bottom: none;
}
</style>

<style>
.xgplayer-skin-default .xgplayer-enter .xgplayer-enter-spinner {
  height: 20px !important;
  width: 20px !important;
}
</style>
